import React, { useState ,useEffect } from "react";
import { Header } from "./style";
//  react hook 的基本使用
const Trade: React.FC = () => {
  const [count, setCount] = useState(100);
  const [weight, setWeight] = useState(200);

   // 类似componentDidMount 和 componentDidUpdate:
  useEffect(()=>{
    

    return ()=>{
       
    }
    // count 代表着  count 变化后才执行return 函数里面的东西
    //当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug，少用。
  },[count])
  return (
    <div className="App">
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <p>我的体重是{weight}</p>
      <button onClick={() => setWeight(weight + 1)}>add weight</button>
      <Header>hhahah </Header>
    </div>
  );
};

export default Trade;
